import React from "react";
import {
  Button,
  Checkbox,
  Input,
  Radio,
  Rate,
  Slider,
  Stepper,
  Switch,
  Uploader,
  Form,
  Picker,
  Calendar,
  Toast,
  DatetimePicker,
} from "react-vant";
import { addpatient } from "../sevice/HomeList";

export default function FormList() {
  const [form] = Form.useForm();

  const onFinish = async (values) => {
    console.log(values); //这里是数据
    //   console.log(values.date);
    //   console.log(new Date(values.date).getMonth() + 1, "lala1");//取得日期
    let Month = new Date(values.date).getMonth() + 1;
    let year = new Date(values.date).getFullYear();
    //   console.log(year);
    let day = new Date(values.date).getDate();
    let selectdate = `${year}-${Month}-${day}`;
    //   console.log(day);
    let { data } = await addpatient({
      address: values.date,
      birthday: selectdate,
      cardId: values.userid,
      name: values.username,
      sex: values.radio,
      tel: values.usertel,
    });
    console.log(data);
    if (data.code == 200) {
      Toast.success("添加成功");
    } else {
      Toast.fail(data.msg);
    }
  };

  return (
    <Form
      colon
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: "16px 16px 0" }}>
          <Button round nativeType="submit" type="primary" block>
            提交
          </Button>
        </div>
      }
    >
      <Form.Item
        // intro="输入你的姓名"
        rules={[{ required: true, message: "请填写姓名" }]}
        name="username"
        label="姓名"
      >
        <Input placeholder="请输入姓名" />
      </Form.Item>
      <Form.Item
        name="radio"
        label="性别"
        rules={[{ required: true, message: "请填写姓名" }]}
      >
        <Radio.Group direction="horizontal">
          <Radio name="0">男</Radio>
          <Radio name="1">女</Radio>
        </Radio.Group>
      </Form.Item>
      {/* 手机号码 */}
      <Form.Item
        rules={[
            {
              validator: (_, value) => {
                if (/1\d{10}/.test(value)) {
                  return Promise.resolve(true)
                }
                return Promise.reject(new Error('请输入正确的手机号码'))
              },
            },
          ]}
        name="usertel"
        label="手机号"
      >
        <Input placeholder="手机号" />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: "请填写身份证号码" }]}
        name="userid"
        label="身份证号"
      >
        <Input placeholder="请输入身份证号码" />
      </Form.Item>
      <Form.Item
        isLink
        name="date"
        label="出生日期"
        trigger="onConfirm"
        onClick={(_, action) => {
          action.current?.open();
        }}
        rules={[{ required: true, message: "请填写姓名" }]}
      >
        <DatetimePicker popup type="date">
          {(val) => (val ? val.toDateString() : "请选择日期")}
        </DatetimePicker>
      </Form.Item>

      <Form.Item
        name="textarea"
        label="详细地址"
        rules={[{ required: true, message: "请填写姓名" }]}
      >
        <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
      </Form.Item>
    </Form>
  );
}
